<template>
	<div class="exchange-wrap">
		<div class="exchange-box">
			<div class="title">
				待兑换金额(元)
			</div>
			<div class="price">{{ rewardObj.rewardValue }}</div>
			<div class="price-sum">累计奖励金额：<em>{{ rewardObj.rewardValue + rewardObj.rewardUsed }}</em>元</div>
			<div class="btn-exchange" :class="{'btn-exchange-disable': rewardObj.rewardValue === 0}" ca="推荐有礼_成就详情$立即兑换" @click="showCpnBox">{{ rewardObj.rewardValue === 0 ? '暂无可兑换奖励金': '立即兑换' }}</div>
		</div>
		<div class="user-box">
			<div class="title">您已成功邀请<em>{{ userCount }}</em>位好友到店消费</div>
			<table class="user-list">
				<tr class="user-item-head"><th>好友</th><th>状态</th><th>奖励</th></tr>
				<tr class="user-item-body-none" v-if="showUserNone">
					<td>-</td><td>-</td><td>-</td>
				</tr>
				<tr class="user-item-body" v-for="user in userList">
					<td>{{ user.mobile }}</td><td>{{ user.coupon_flag }}</td><td><div class="ellipsis" style="width: 12.5rem;">{{ user.rewardValue }}</div></td>
				</tr>
				
			</table>
			<div class="user-more" @click="showMoreUser" v-if="showMoreUserFlag">查看全部></div>
		</div>
		<div class="cpn-box" :class="{'slideUp': showCpnBoxStatus ===1, 'slideDown': showCpnBoxStatus === 2}" v-show="showCpnBoxStatus === 1" style="display: none;">
			<div class="close" ca="推荐有礼_成就详情$关闭" @click="hideCpnBox">＋</div>
			<div class="title">
				<span class="price">当前奖励金&nbsp;<em>¥</em><em class="price-text">{{ rewardObj.rewardValue }}</em>&nbsp;&nbsp;</span><span class="select">请选择兑换</span>
			</div>
			<div class="cpn-list">
				
				<div class="cpn-item" v-for="(cpn ,index) in cpnList">
					<div class="left">
						<span class="price"><em class="price-text">{{ cpn.faceValue }}</em><em class="price-danwei">元</em></span>
					</div>
					<div class="center">
						<div class="cpn-name ellipsis">{{ cpn.activityName }}</div>
						<div class="cpn-desc ellipsis">{{ cpn.ruleDesc }}</div>
					</div>
					<div class="right">
						<div class="btn" :class="{'disabled': cpn.disable }" :ca="'推荐有礼_成就详情$点击兑换'+cpn.activityName" @click="exchangeAction(index, cpn.disable)">{{ cpn.disable ? '金额不足': '点击兑换' }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mask" v-if="showMaskFlag" @click="hideCpnBox"></div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	export default{
		data (){
			return {
				showCpnBoxStatus: 2,
				showMaskFlag: false,
				showUserNone: false,
				shareUid: "",
				rewardObj:{
					"rewardValue": 0,
					"rewardUsed": 0
				},
				allUserList:[],
				userList:[],
				userCount:0,
				cpnList:[],
				locationObj: {
					"latitude": "",
					"longitude": "",
					"cityName": ""
				},
				showMoreUserFlag: false,
				globalActionFlag: true //防止重复点击 false不可点击  true可点击
			};
		},
		components: {},
		created (){
			var _this = this;
			//初始化页面
	        _this.init();
		},
		mounted (){
			var _this = this;
			//打点
    		_this.$nextTick(function () {
    			common.ANA_AnalyticsScan();
    		});
		},
		methods: {
			//页面初始化
			init: function () {
				var _this = this;
				//获取用户奖励金信息
				_this.getUserReward();
				//获取用户邀请数量
				_this.getGuide();
				//获取用户券列表
				//_this.getCpnList();
			},
			//显示更多邀请用户
			showMoreUser: function () {
				var _this = this;
				var length = _this.userList.length;
				var _userList = _this.allUserList.slice(length);
				_this.userList.push.apply(_this.userList, _userList);
				if (_this.userList.length = _this.allUserList.length) {
					_this.showMoreUserFlag = false;
				}
			},
			//显示可以兑换的券列表
			showCpnBox: function () {
				var _this = this;
				
				//无奖励金不可点击
				if (_this.rewardObj.rewardValue === 0) {
					return;
				}
				_this.showCpnBoxStatus = 1;
				_this.showMaskFlag = true;
				document.getElementsByClassName('exchange-wrap')[0].style.height= '100vh';
	      		document.getElementsByClassName('exchange-wrap')[0].style.overflowY = 'hidden';
			},
			//隐藏可以兑换的券列表
			hideCpnBox: function () {
				var _this = this;
				_this.showCpnBoxStatus = 2;
				_this.showMaskFlag = false;
				document.getElementsByClassName('exchange-wrap')[0].style.height= 'auto';
	      		document.getElementsByClassName('exchange-wrap')[0].style.overflowY = 'auto';
			},
			//获取用户奖励金信息
			getUserReward: function () {
				var _this = this;
				var shareUid = window.sessionStorage.getItem("shareUid");
				var paramObj = {
					"userId": shareUid
				};
				_this.$http.get(common.isdev() + '/guide/getUserRewardInfo/0.htm?userId='+shareUid).then(function (res) {
			        if(res.data.result == 1) {
			          	_this.rewardObj =  res.data.obj;
			          	//获取用户券列表
			          	_this.getCpnList();
			        } else {
			        	Toast("获取奖励金失败！");
			        }
			    }, function (res) {
			    	Toast("获取奖励金失败！");
			    });
			    
			    //调试
			    //_this.getCpnList();
			},
			//获取用户邀请数量
			getGuide: function () {
				var _this = this;
			    var paramUserObj = {
			    	
			    };
				_this.$http.post(common.isdev() + '/guide//getGuidePage/1.htm', paramUserObj).then(function (res) {
			        if(res.data.result == 1) {
			        	_this.userCount =  res.data.obj.cnt;
			        	var _userList = res.data.obj.guideList;
			        	for (var i = 0; i < _userList.length; i++) {
			        		var _user = _userList[i];
			        		/*if (_user.type == 1) {//老版本活动数据
			        			_user.rewardValue = _user.old_user_couponname;
			        		} else if (_user.type == 2) {//新版本活动数据
			        			if (_user.coupon_flag == 1) {//已注册
			        				_user.rewardValue = '-';
				        		}else {//已消费
				        			_user.rewardValue = '¥' + _user.rewardValue;
				        		}
			        		}*/
			        		
			        		if (_user.rewardValue > 0) {
			        			_user.rewardValue = '¥' + _user.rewardValue;
			        		} else if (_user.old_user_couponcode) {
			        			_user.rewardValue = _user.old_user_couponname || '';
			        		} else {
			        			_user.rewardValue = '-';
			        		}
			        		
			        		if (_user.coupon_flag == 1) {//已注册
		        				_user.coupon_flag = '已注册';
			        		}else {//已消费
			        			_user.coupon_flag = '已消费';
			        		}
			        	}
			        	_this.userList =  _userList.slice(0, 20);
			        	_this.allUserList = _userList;
			        	//无邀请列表时默认显示
			        	if (_userList.length === 0) {
			        		_this.showUserNone = true;
			        	}
			          	//判断是否现象更多用户按钮
			          	if (_userList.length > 20) {
			          		_this.showMoreUserFlag = true;
			          	}
			          	
			        } else {
			        	Toast("获取用户邀请数量失败！");
			        }
			    }, function (res) {
			    	Toast("获取用户邀请数量失败！");
			    });
			},
			//获取用户券列表
			getCpnList: function ( ) {
				var _this = this;
				var paramCpnObj = {
					"cityName": _this.locationObj.cityName, 
					"latitude": _this.locationObj.latitude, 
					"longitude":  _this.locationObj.longitude
				}
				_this.$http.post(common.isdev() + '/guide/getExchangeCouponList4OldUser/0.htm', paramCpnObj).then(function (res) {
			        if(res.data.result == 1) {
			        	var _cpnList  = res.data.obj;
			        	_cpnList.sort(function (a, b) {
			        		return a.faceValue - b.faceValue;
			        	});
			        	for (var i=0; i < _cpnList.length; i++) {
			        		var _cpn = _cpnList[i];
			        		if (_this.rewardObj.rewardValue >=  _cpn.faceValue) {
			        			_cpn.disable = false;
			        		} else {
			        			_cpn.disable = true;
			        		}
			        	}
			          	_this.cpnList =  _cpnList;
			          	_this.$nextTick(function () {
			    			common.ANA_AnalyticsScan();
			    		});
			        } else {
			        	Toast("获取可兑换券列表失败！");
			        }
			    }, function (res) {
			    	Toast("获取可兑换券列表失败！");
			    });
			    //根据区域获取用户可兑换券列表
			    /*lb.geolocation(function (data) {
		          	if (data.errorCode == 0) {
			            //var longitude = data.text.longitude ? data.text.longitude : "";
			            //var latitude = data.text.latitude ? data.text.latitude : "";
			            var city = data.text.cityName ? data.text.cityName : "";
			            _this.locationObj = {
			              //"longitude": longitude,
			              //"latitude": latitude,
			              "cityName": city
			            };
		          } else if (data.errorCode == -1) {
		            //Toast("抱歉，定位失败。如未开启定位请在设置中开启定位");
		          }
		        });*/
			},
			exchangeAction: function (index, disable) {
				var _this = this;
				if (disable) {
					return;
				}
				var activityCode = _this.cpnList[index].activityCode;
				var prizeCode = _this.cpnList[index].prizeCode;
				var paramObj = {
	              	"activityCode": activityCode,
	              	"prizeCode": prizeCode,
	              	"cityName": _this.locationObj.cityName, 
					"latitude": _this.locationObj.latitude, 
					"longitude":  _this.locationObj.longitude
	           };
	           
	            if (!_this.globalActionFlag) {
	            	return;
	            }
	            _this.globalActionFlag = false;
				_this.$http.post(common.isdev() + '/guide/exchangeCoupon4OldUser/0.htm', paramObj).then(function (res) {
			        if(res.data.result == 1) {
			          	//_this.rewardObj =  res.data.obj;
			          	Toast("兑换成功,请在我的券查看！");
			          	_this.hideCpnBox();
			          	//重新初始化页面
			          	_this.init();
			          	//window.location.reload();
			        } else {
			        	var errorCode = res.data.errorCode ;
						if (errorCode == 1010) {
							Toast("抱歉,兑换失败!");
						} else if (errorCode == 1011){
							Toast("抱歉,兑换失败!");
						} else  {
							Toast("抱歉,兑换失败！");
						}
			        }
			        _this.globalActionFlag = true;
			    }, function (res) {
			    	_this.globalActionFlag = true;
			    	Toast("抱歉,兑换失败！");
			    });
				
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
	height: 100%;
	}
	.exchange-wrap {
		height: 100%;
		position: relative;
		background: #f2f9f3 url(../../../assets/image/invitefriends2/exchange/index-bg.png) center top no-repeat;
		background-size: 100% auto;
		.exchange-box {
			.title {
				box-sizing: content-box;
				padding-top: 4.3rem;
				height: 2.4rem;
				line-height: 2.4rem;
				text-align: center;
				font-size:1.7rem;
				color:#243742;
			}
			.price {
				height: 8.4rem;
				line-height: 8.4rem;
				text-align: center;
				font-size:72px;
				font-weight: 800;
				color:#cc9100;
			}
			.price-sum {
				height: 1.8rem;
				text-align: center;
				line-height: 1.8rem;
				font-size:1.3rem;
				color:#7a897d;
			}
		}
		.btn-exchange {
			margin: 0 auto;
			margin-top: 4.1rem;
			width: 33.5rem;
			height: 4.6rem;
			line-height: 4.6rem;
			border-radius:0.4rem;
			background: #cc9100;
			text-align: center;
			font-size:17px;
			color: #ffffff;
		}
		.btn-exchange-disable {
			background: #f4e4bf;
		} 
		.user-box {
			margin-top: 2.8rem;
			width: 100%;
			min-height: 40rem;
			background: #ffffff;
			.title {
				height: 6rem;
				line-height: 6rem;
				border-bottom: 1px solid #d2d5d7;
				background: transparent url(../../../assets/image/invitefriends2/exchange/user-title.png) center bottom no-repeat;
				background-size: 30rem 4.7rem;
				text-align: center;
				font-size:1.6rem;
				color:#2d2d2d;
				em {
					color: #cc9100;
				}
			}
			.user-list {
				width: 100%;
				text-align: center;
				th,td {
					width: 33.33%;
				}
				.user-item-head {
					height: 3rem;
					font-size:1.2rem;
					color:#c6c6c6;
					vertical-align: bottom;
				}
				.user-item-body-none {
					height: 4.3rem;
					color:#000000;
					font-size:1.3rem;
				}
				.user-item-body {
					height: 4.3rem;
					font-size:1.4rem;
					color:#000000;
					td:nth-of-type(1) {
						
					}
					td:nth-of-type(2) {
						font-size:1.3rem;
					}
					td:nth-of-type(3) {
						color:#fd2828;
					}
				}
			}
			.user-more {
				height: 4.3rem;
				line-height: 4.3rem;
				margin-top: 1rem;
				border-top: 1px solid #d2d5d7;
				text-align: center;
				font-size:1.4rem;
				color:#000000;
			}
		}
		.cpn-box {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			// transform: translate(0,100%);
			// -webkit-transform: translate(0,100%);
			width: 100%;
			background: #ffffff;
			.close {
				position: absolute;
			    top: 0.6rem;
    			right: 0.7rem;
				transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
				text-align: center;
				font-size: 2.8rem;
				color: #b0b6b9;
			}
			.title {
				height: 5.6rem;
				line-height: 5.6rem;
				border-bottom: 1px solid #d2d5d7;
				padding: 0 1.4rem;
				.price {
					border-right: 1px solid #d2d5d7;
					font-size:1.5rem;
					color:#2d2d2d;
					em {
						font-size:1.5rem;
						color:#cc9100;
					}
				}
				.select {
					margin-left: 1.2rem;
					font-size:1.5rem;
					color:#2d2d2d;
				}
			}
			.cpn-list {
				padding: 1.3rem 1.5rem 0.7rem;
				width: 100%;
				height: 33rem;
				overflow-scrolling: touch;
				-webkit-overflow-scrolling: touch;
				overflow-y: scroll;
				overflow-x: hidden;
				.cpn-item {
					margin-top: 1rem;
					width: 100%;
					background: transparent url(../../../assets/image/invitefriends2/exchange/cpn-item.png) center center no-repeat;
					background-size: contain;
					&:nth-of-type(1) {
						margin-top: 0;
					}
					&:nth-last-of-type(1) {
						margin-bottom: 1rem;
					}
					.left {
						float: left;
						height: 7rem;
						line-height: 7rem;
						width: 7.7rem;
						text-align: center;
						.price {
							color:#f12626;
							.price-text {
								font-size: 3rem;
								font-weight: 700;
							}
							.price-danwei {
								font-size: 1.3rem;
							}
						}
					}
					.center {
						float: left;
						height: 7rem;
						width: 16.7rem;
						padding-left: 1.2rem;
						text-align: left;
						.cpn-name {
							margin-top: 1.3rem;
							height: 2.4rem;
							line-height: 2.4rem;
							font-size: 1.7rem;
							font-weight: 500;
							color: #262f34;
						}
						.cpn-desc {
							height: 1.8rem;
							line-height: 1.8rem;
							font-size: 1.3rem;
							color: #262f34;
						}
					}
					.right {
						float: left;
						height: 7rem;
						.btn {
							margin-top: 2rem;
							width: 8rem;
							height: 3rem;
							line-height: 2.8rem;
							border: 1px solid #cc9100;
							border-radius: 999px;
							text-align: center;
							font-size: 1.3rem;
							font-weight: 800;
							color: #cc9100;
						}
						.disabled {
							border: 1px solid #e6e6e6;
							color: #e6e6e6;
						}
					}
					
					&:after {
						clear: both;
						display: block;
						content: '';
						height: 0;
						overflow: hidden;
					}
				}
			}
		}
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
		}
		.slideUp{
	        animation: slideUp 400ms ease-in forwards;
	        -webkit-animation: slideUp 400ms ease-in forwards;
	        display:block;
	    }
	    @-webkit-keyframes slideUp {
	        0%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	        100%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	    }
	    @keyframes slideUp {
	        0%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	        100%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	    }
	    .slideDown{
	        animation: slideDown 400ms ease-in forwards;
	        -webkit-animation: slideDown 400ms ease-in forwards;
	        display:none;
	    }
	    @-webkit-keyframes slideDown {
	        0%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	        100%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	    }
	    @keyframes slideDown {
	        0%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	        100%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	    }
	    .ellipsis {
			white-space: nowrap;  
	        overflow: hidden;  
	        text-overflow: ellipsis;  
		}
	}
	.mint-toast {
		z-index: 1000 !important;
	}
</style>
